<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: 1px solid #ddd;
        }

        tr:nth-child(odd) {
            background-color: #f9f9f9;
        }

        @media screen and (max-width: 500px) {

            table,
            thead,
            tbody,
            th,
            td,
            tr {
                display: block;
            }

            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            td {
                position: relative;  /* 这个是为了td:before服务的 */
                padding-left: 50%;
            }

            td:before {
                position: absolute;  /* 相对于上面的td而言 */
                left: 6px;
                content: attr(data-th);
                font-weight: bold;
            }

            td:first-of-type {
                font-weight: bold;
            }
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Team</th>
                <th>1st</th>
                <th>2nd</th>
                <th>3rd</th>
                <th>4th</th>
                <th>5th</th>
                <th>6th</th>
                <th>7th</th>
                <th>8th</th>
                <th>9th</th>
                <th>Final</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-th="Team">Toronto</td>
                <td data-th="1st">0</td>
                <td data-th="2nd">0</td>
                <td data-th="3rd">0</td>
                <td data-th="4th">4</td>
                <td data-th="5th">0</td>
                <td data-th="6th">1</td>
                <td data-th="7th">0</td>
                <td data-th="8th">0</td>
                <td data-th="9th">0</td>
                <td data-th="Final">5</td>
            </tr>
            <tr>
                <td data-th="Team">San Francisco</td>
                <td data-th="1st">0</td>
                <td data-th="2nd">0</td>
                <td data-th="3rd">0</td>
                <td data-th="4th">4</td>
                <td data-th="5th">0</td>
                <td data-th="6th">0</td>
                <td data-th="7th">0</td>
                <td data-th="8th">0</td>
                <td data-th="9th">0</td>
                <td data-th="Final">4</td>
            </tr>
        </tbody>
</body>

</html>